/* container
 *****************************************************************************/
.foxui-container,
.foxui-container-fluid,
.foxui-container-xxxl,
.foxui-container-xxl,
.foxui-container-xl,
.foxui-container-lg,
.foxui-container-md,
.foxui-container-sm,
.foxui-container-xs {
    width: 100%;
    padding-right: var(--foxui-gutter-x, $--layout-container-padding-default);
    padding-left: var(--foxui-gutter-x, $--layout-container-padding-default);
    margin-right: auto;
    margin-left: auto;
}

@include utils-media-block(xs) {
    .foxui-container-xs,
    .foxui-container {
        max-width: 720px;
    }
}

@include utils-media-block(sm) {
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 720px;
    }
}

@include utils-media-block(md) {
    .foxui-container-md,
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 960px;
    }
}

@include utils-media-block(lg) {
    .foxui-container-lg,
    .foxui-container-md,
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 1140px;
    }
}

@include utils-media-block(xl) {
    .foxui-container-xl,
    .foxui-container-lg,
    .foxui-container-md,
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 1320px;
    }
}

@include utils-media-block(xxl) {
    .foxui-container-xxl,
    .foxui-container-xl,
    .foxui-container-lg,
    .foxui-container-md,
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 1520px;
    }
}

@include utils-media-block(xxxl) {
    .foxui-container-xxxl,
    .foxui-container-xxl,
    .foxui-container-xl,
    .foxui-container-lg,
    .foxui-container-md,
    .foxui-container-sm,
    .foxui-container-xs,
    .foxui-container {
        max-width: 1720px;
    }
}

/* row
 *****************************************************************************/
.foxui-row {
    --foxui-gutter-x: 24px;
    --foxui-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(-0.5 * var(--foxui-gutter-x));
    margin-right: calc(-0.5 * var(--foxui-gutter-x));
    margin-top: calc(-1 * var(--foxui-gutter-y));

    > * {
        box-sizing: border-box;
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--foxui-gutter-x) * 0.5);
        padding-left: calc(var(--foxui-gutter-x) * 0.5);
        margin-top: var(--foxui-gutter-y);
    }
}

/* col/pull/push/offset  ->  xs / sm / md / lg / xl / xxl / xxxl
 *****************************************************************************/
@include layout-column(none);
@each $size in $mediaSizeList {
    @include utils-media-block($size) {
        @include layout-column($size);
    }
}

/* position  ->  xs / sm / md / lg / xl / xxl / xxxl
 *****************************************************************************/
@each $size in $mediaSizeList {
    @include layout-position($size);
}

/* hidden/visible/gutter order  ->  xs / sm / md / lg / xl / xxl / xxxl
 *****************************************************************************/
@include layout-hidden(none);
@include layout-gutter(none);
@include layout-order(none);
@each $size in $mediaSizeList {
    @include utils-media-inblock($size) {
        @include layout-hidden($size);
        @include layout-gutter($size);
        @include layout-order($size);
    }
}

/* 水平方向对齐
 *****************************************************************************/
.foxui-justify-content-start {
    justify-content: flex-start !important;
}

.foxui-justify-content-end {
    justify-content: flex-end !important;
}

.foxui-justify-content-center {
    justify-content: center !important;
}

.foxui-justify-content-between {
    justify-content: space-between !important;
}

.foxui-justify-content-around {
    justify-content: space-around !important;
}

.foxui-justify-content-evenly {
    justify-content: space-evenly !important;
}

/* 垂直方向对齐
 *****************************************************************************/
.foxui-align-items-start {
    align-items: flex-start !important;
}

.foxui-align-items-end {
    align-items: flex-end !important;
}

.foxui-align-items-center {
    align-items: center !important;
}

.foxui-align-items-baseline {
    align-items: baseline !important;
}

.foxui-align-items-stretch {
    align-items: stretch !important;
}

.foxui-align-content-start {
    align-content: flex-start !important;
}

.foxui-align-content-end {
    align-content: flex-end !important;
}

.foxui-align-content-center {
    align-content: center !important;
}

.foxui-align-content-between {
    align-content: space-between !important;
}

.foxui-align-content-around {
    align-content: space-around !important;
}

.foxui-align-content-stretch {
    align-content: stretch !important;
}

.foxui-align-self-auto {
    align-self: auto !important;
}

.foxui-align-self-start {
    align-self: flex-start !important;
}

.foxui-align-self-end {
    align-self: flex-end !important;
}

.foxui-align-self-center {
    align-self: center !important;
}

.foxui-align-self-baseline {
    align-self: baseline !important;
}

.foxui-align-self-stretch {
    align-self: stretch !important;
}

/* 排序方向
 *****************************************************************************/
.foxui-flex-row {
    flex-direction: row !important;
}

.foxui-flex-column {
    flex-direction: column !important;
}

.foxui-flex-1 {
    flex: 1;
}
